<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>贷款产品</title>

    <!-- styles here -->
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" href="../css/Public_CSS.css">
    <link rel="stylesheet" href="../css/mui.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>

<body>
    <div id="app" class="loan-item-page">
        <div class="banner-back">
            <span onclick="window.history.back()">
                <i>返回</i>
            </span>御贝金服
        </div>
        <div class="wrap">
            <a v-for="item in loans" @click="link(item.loanId)" class="bg-block loan-item">
                <h1 class="item-name" v-html="item.loanName"></h1>
                <div class="item-detail">
                    <div class="detail-l">
                        <span v-html="item.loanQuota"></span>
                        <p>还款方式：
                            <span v-html="item.loanPayment"></span>
                        </p>
                    </div>
                    <div class="detail-r">
                        <div>
                            <p>
                                <span>月</span>
                                <span>利</span>
                                <span>率</span>
                            </p>
                            <span v-html="item.loanRate"></span>
                        </div>
                        <div>
                            <p>
                                <span>抵</span>
                                <span>押</span>
                                <span>成</span>
                                <span>数</span>
                            </p>
                            <span v-html="item.loanMort"></span>
                        </div>
                        <div>
                            <p>
                                <span>期</span>
                                <span>限</span>
                            </p>
                            <span v-html="item.loanTerm"></span>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <!-- scripts here -->
    <script src="../js/common.js" type="text/javascript"></script>
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../public/js/loan/mui.min.js"></script>
    <script>
        var typeId = GetQueryString("typeId");
        $(function () {
            if (typeId == null || typeId == undefined) {
                mui.alert("环境异常");
                return;
            }
            vm.loadAllData();
        });
        var vm = new Vue({
            el: "#app",
            data: {
                loans: []
            },
            methods: {
                loadAllData: function () {
                    $.ajax({
                        url: '/thmlfApi/avs/yb/loanList?appId=' + appId() + '&typeId=' + typeId,
                        dataType: "JSON",
                        success: function (r) {
                            console.log('data', r);
                            if (r.code == 200)
                                vm.loans = r.result;
                            else
                                alert(r.message);
                        },
                        error: function (e) {
                            console.log('request error', e);
                            mui.alert("请求数据失败，请稍后重试");
                        }
                    })
                },
                link: function (loanId) {
                    if (loanId == null || loanId == undefined) {
                        mui.alert("环境异常");
                        return;
                    }
                    window.location.href = "loan-item2.html?loanId=" + loanId;
                }
            }
        });
    </script>

</body>

</html>